<script lang="ts" setup>
import Balance from "./components/balance.vue";
import CashOut from "./components/cash-out.vue";
</script>

<template>
  <umrp-container direction="vertical" min-height="100%" :gap="16" bg-color="#f2f2f2" padding="16px">
    <umrp-card>
      <umrp-button type="primary" v-link:FinanceCashOut style="margin-bottom: 16px">我要提现</umrp-button>
      <umrp-grid :cols="4" :col-gap="10">
        <umrp-grid-item>
          <umrp-statistic :value="803805.66" extra="累计收款(元)"></umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="869.75" extra="可提现余额(元)"></umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="778633.26" extra="成功提现(元)"></umrp-statistic>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-statistic :value="0" extra="待结算金额(元)"></umrp-statistic>
        </umrp-grid-item>
      </umrp-grid>
    </umrp-card>
    <umrp-card>
      <umrp-tabs default-active-tab="1">
        <umrp-tab-panel key="1" title="余额明细">
          <Balance />
        </umrp-tab-panel>
        <umrp-tab-panel key="2" title="提现明细">
          <CashOut />
        </umrp-tab-panel>
      </umrp-tabs>
    </umrp-card>
  </umrp-container>
</template>
